<template>
  <div class="bigbox">
    <template v-for="(item,index) in shuju" :key=item.username>
      <div class="smallbox">
        <div class="s_photo">
          <img :src=item.img>
        </div>
        <div class="s_show">
          <div style="line-height:44px">{{item.mastername}}</div>
          <div style="color:#999999; font-size:14px">{{item.message}}</div>
        </div>
        <div class="s_time">
          <van-button @click="but(item,index)" color="linear-gradient(to right, #ff6034, #ee0a24)" size="small">
            <span style="margin-left:12.5px;margin-right: 12.5px;" v-if="item.isFollow==false">
              +关注
            </span>
            <span style="margin-left:5px;margin-right: 5px;" v-else>
              关注成功
            </span>
          </van-button>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { searchresultmaster } from "@/api/search"
  let shuju=ref([])
  searchresultmaster().then((res:any)=>{
    console.log(res.data.data)
    shuju.value=res.data.data
  })
  const but=(panduan:any,numb:number)=>{
    if(panduan.isFollow==true){
      panduan.isFollow=false
    }else if(panduan.isFollow==false){
      panduan.isFollow=true
    }
    // console.log(panduan)
    // console.log(numb)
  }
</script>

<style scoped>
  .bigbox{
    width: 100%;
    height: 650px;
    background-color: white;
    color: black;
    overflow-y: auto;

  }
  .smallbox{
    display: flex;
    height: 80px;
    border-bottom: 1px solid rgb(222, 221, 221);
    background-color: #ffffff;
  }
  .s_photo .s_show .s-time{
    height: 100%;
  }
  /* 头像 */
  .s_photo{
    flex: 1;
    text-align: center;
    height: 100%;
  }
  img{
    width:50px;
    height:50px;
    border-radius: 50px;
    margin-top: 10px;
  }
  /* 名字+最后一条记录*/
  .s_show{
    flex: 3.2;
  }
  .s_show div{
    height: 44%;
    /* border: 1px solid red; */
  }
  /* 显示最后一条记录的事件 */
  .s_time{
    flex: 1.2;
    line-height: 70px;
    font-size: 13px;
  }
</style>